// 1. 初始化Git

import 'package:flutter/material.dart';

void main() {
  //  MaterialApp根组件 可以用来配置页面和标题
  runApp(MaterialApp(
    title: '网页的页签栏标题',
    // 配置页面
    // Scaffold是一个页面组件, 可以配出: 顶部栏 正文 底部tab栏 悬浮按钮 抽屉
    home: Scaffold(
      // 顶部操作栏
      appBar: AppBar(
        title: Text('标题'),
        backgroundColor: Colors.pink,
        // 左侧的按钮
        leading: Icon(Icons.backpack),
        // 右侧的按钮
        actions: [Icon(Icons.share)],
      ),
      // 4.  使用自己封装的组件
      body: Main(),

      //  配出底部的tab栏
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings), label: 'Settings'),
        ],
        currentIndex: 0,
        onTap: (index) {},
      ),
      // 悬浮按钮,   默认在右下角
      floatingActionButton: Icon(Icons.add),
    ),
    // 关闭debugger模式的按钮
    debugShowCheckedModeBanner: false,
  ));
}

class Main extends StatelessWidget {
const Main({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context){

    // 指定尺寸的 一个盒子
    return Container(
      width: 100,
      height: 100,
      // margin: EdgeInsets.all(50),
      // margin: EdgeInsets.symmetric(vertical: 10,horizontal: 20),
      // margin: EdgeInsets.only(left: 50, top: 100,  right: 20,bottom: 20),
      // margin: EdgeInsets.fromLTRB(20,  30, 40, 50),
      margin: EdgeInsets.zero,
      padding:EdgeInsets.all(10),
      // color: Colors.pink,  //  color属性和 decoration中的color只能同时用一个 
      // 装饰
      child: Text('文本内容',),
      decoration: BoxDecoration(
        color:Colors.yellow, 
        border: Border.all(color: Colors.red, width: 2),
        // borderRadius: BorderRadius.all(Radius.circular(10))
        // borderRadius: BorderRadius.all(Radius.elliptical(50, 20))
        borderRadius: BorderRadius.only(topLeft: Radius.elliptical(50, 20), bottomRight: Radius.elliptical(50, 20))
        
        ),
    );
  }
}



